<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>UA查卡器-详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- <link rel='stylesheet' type='text/css' media='screen' href='main.css'> -->
    <!-- <script src='main.js'></script> -->

    <script>
      var datas;
      var url = "./data/data_cn.json";
      var request = new XMLHttpRequest();
      request.open("get", url); /*设置请求方法与路径*/
      request.send(null); /*不发送数据到服务器*/
      request.onload = function () {
        /*XHR对象获取到返回信息后执行*/
        if (request.status == 200) {
          /*返回状态为200，即为数据获取成功*/
          datas = JSON.parse(request.responseText);

          var queryString = window.location.search;
          var urlParams = new URLSearchParams(queryString);
          var cardNumData = urlParams.get("cardNumData");

          var data;
          for (var i = 0; i < datas.length; i++) {
            data = datas[i];
            if (data.cardNumData == cardNumData) {
              console.log(data);
              break;
            }
          }

          var imgFileName =
            "./card/" + data.cardNumData.replace("/", "_") + ".png";
          var cardInfoDiv = document.getElementById("cardInfoArea");

          cardInfoDiv.innerHTML = ` 
            <p style="font-size:1.5rem;">${data.cardNumData}</p>
            <p style="font-size:1.2rem;">中文卡名: ${data.cardCnName}</p>
            <p style="font-size:1.2rem;">日文卡名: ${data.cardName}</p>
            <p style="font-size:1.2rem;">特征：${data.attributeCnData}</p>
            <p style="font-size:1.2rem;">效果：</p>
            <p class="effectCnData" >${data.effectCnData}</p>
            <p style="font-size:1.2rem;">触发效果：</p>
            <p >${data.triggerCnData}</div>
            <img src="${data.imageUrl}" style="width:90vw">`;

          document.querySelector(".effectCnData").innerText = data.effectCnData;
        }
      };
    </script>
    <style>
      * {
        margin: 0px;
      }

      #cardInfoArea {
        border-width: 4px;
        border-style: double;
        width: calc(100vw-8px);
        padding: 0 8px 8px 8px;
      }

      .cardImageBox {
        margin: 0 3px;
      }

      .cardImageBox p {
        text-align: center;
      }

      .cardImage {
        /* width: 19.5% */
        width: 75%;
        margin: 3px auto;
        display: block;
      }
    </style>
  </head>

  <body>
    <div id="cardInfoArea"></div>
  </body>
</html>
